<template>
  <div id="office-edit">
      <el-container>
        <el-main style="height: 510px">
          {{unionButton.children[2].children[0].name}}
          <el-form label-width="100px">
            <el-form-item style="width: 350px" label="归属公司">
              <el-select clearable v-model="form.companyId" placeholder="请选择归属公司">
                <el-option v-for="(item,index) of companies" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" label-width="100px" >
            <el-form-item style="width: 320px" label="上级组织">
              <el-input readonly v-model="parent.name" placeholder="请选择上级组织"></el-input>
            </el-form-item>
            <el-form-item >
              <union-select ref="select" @choseItem="choseParent" parent-id="parentId" :url="unionButton.target"
                            :permission="unionButton.id"
                            init-value="0"></union-select>
            </el-form-item>
          </el-form>
          <el-form label-width="100px" >
            <el-form-item style="width: 320px" label="组织名称">
              <el-input v-model="form.name" placeholder="请输入组织名称"></el-input>
            </el-form-item>
            <el-form-item style="width: 320px" label="上级组织编号">
              <el-input readonly v-model="form.parentCode" placeholder="请选择上级组织"></el-input>
            </el-form-item>
            <el-form-item style="width: 320px" label="组织编号">
              <el-input v-model="form.code" placeholder="请输入组织编号"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" label-width="100px" >
            <el-form-item style="width: 320px" label="组织类型">
              <el-input readonly v-model="form.type" placeholder="请选择组织类型"></el-input>
            </el-form-item>
            <el-form-item >
              <union-select ref="select" @choseItem="choseType" parent-id="parentId" :url="unionButton.children[2].children[0].target"
                            :permission="unionButton.children[2].children[0].id"
                            init-value="winfo_bd7ac0719ddf3a11e9b6c954e1add85a5d"></union-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" label-width="100px" >
            <el-form-item style="width: 320px" label="组织级别">
              <el-input readonly v-model="form.level" placeholder="请选择组织级别"></el-input>
            </el-form-item>
            <el-form-item>
              <union-select ref="select" @choseItem="choseLevel" parent-id="parentId" :url="unionButton.children[2].children[0].target"
                            :permission="unionButton.children[2].children[0].id"
                            init-value="winfo_bd27fd5289df3a11e9b6c954e1add85a5d"></union-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" label-width="100px" >
            <el-form-item style="width: 320px" label="归属地区">
              <el-input readonly v-model="form.area" placeholder="请选择归属地区"></el-input>
            </el-form-item>
            <el-form-item >
              <union-select ref="select" @choseItem="choseArea" parent-id="parentId" :url="unionButton.children[2].children[1].target"
                            :permission="unionButton.children[2].children[1].id"
                            init-value="0"></union-select>
            </el-form-item>
          </el-form>
          <el-form label-width="100px" >
            <el-form-item v-if="userChoseShow" style="width: 350px" label="主负责人">
              <el-select clearable v-model="form.chiefId" placeholder="请选择主负责人">
                <el-option v-for="(item,index) of users" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="userChoseShow" style="width: 350px" label="副负责人">
              <el-select clearable v-model="form.deputyId" placeholder="请选择副负责人">
                <el-option v-for="(item,index) of users" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 350px" label="邮编">
              <el-input readonly v-model="form.zipCode" placeholder="请选择归属地区"></el-input>
            </el-form-item>
            <el-form-item style="width: 350px" label="联系电话">
              <el-input suffix-icon="el-icon-phone" v-model="form.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item style="width: 350px" label="邮箱">
              <el-input suffix-icon="el-icon-position" v-model="form.mail" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item style="width: 350px" label="邮箱">
              <el-input suffix-icon="el-icon-printer" v-model="form.fax" placeholder="请输入传真号码"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer style="height: 100px">
          <el-divider></el-divider>
          <el-form label-width="100px">
            <el-form-item style="width: 350px;" label="">
              <el-button @click="submit" type="primary" icon="el-icon-s-promotion">提交</el-button>
            </el-form-item>
          </el-form>
        </el-footer>
      </el-container>

<!--    </el-form>-->
  </div>
</template>

<script>
  import unionSelect from '../../../common/union-select'

  export default {
    components: {
      unionSelect
    },
    name: "office-edit",
    mounted() {
      this.initData()
    },
    methods: {
      submit(){
        if (!this.invalid()){
          return
        }
        if (this.form.zipCode.length != 6){
          this.common.layMsgAutoClose({type:'e',msg:'归属地区需选择到区县级别'})
          return
        }
        this.common.request({
          url:this.button.target,
          param:this.form,
          permission:this.button.id,
          success:res=>{
            if (res.code == 1){
              this.$emit('save')
            }
          }
        })
      },
      invalid(){
        if (this.common.isNotEmpty(this.parent.id)){
          this.form.parentId = this.parent.id
        }
        if (this.common.isNotEmpty(this.parent.code)&&this.common.isNotEmpty(this.form.code)){
          this.form.code = this.parent.code + this.form.code
        }
        let validateData = [
          {key:this.form.name,msg:'组织名称'},
          {key:this.form.code,msg:'组织编号'},
          {key:this.form.parentId,msg:'上级组织'},
          {key:this.form.levelId,msg:'组织级别'},
          {key:this.form.typeId,msg:'组织类型'},
          {key:this.form.areaId,msg:'归属地区'},
        ]

        return this.common.validate(validateData)
      },
      initParent(){
        if (this.common.isNotEmpty(this.form.parentId)){
          this.common.request({
            url:this.unionButton.target,
            param:{
              id:this.form.parentId
            },
            permission:this.unionButton.id,
            success:res=>{
              if (res.code ==1){
                if (this.common.isNotEmpty(res.data.rows)){
                  this.parent = $.extend(true,{},res.data.rows[0])
                }
                if (this.common.isNotEmpty(this.parent.companyId)){
                  this.$set(this.form,'companyId',this.parent.companyId)
                }
                if (this.common.isNotEmpty(this.parent.areaId)){
                  this.$set(this.form,'areaId',this.parent.areaId)
                }
                if (this.common.isNotEmpty(this.parent.area)){
                  this.$set(this.form,'area',this.parent.area)
                }
                if (this.common.isNotEmpty(this.parent.zipCode)){
                  this.$set(this.form,'zipCode',this.parent.zipCode)
                }
                if (this.common.isNotEmpty(this.form.code) && this.common.isNotEmpty(this.parent.code)){
                  let code = this.form.code.substring(this.parent.code.length)
                  this.$set(this.form,'code',code)
                }
              }
            }
          })
        }
      },
      initData() {
        this.initParent()
        this.initCompany()
        if (this.common.isNotEmpty(this.form.id)) {
          this.initUsers()
        }
      },
      initUsers() {
        this.userChoseShow = true
        if (this.common.isEmpty(this.form.id)) {
          return
        }
        this.common.request({
          url: this.unionButton.children[2].children[2].target,
          param: {
            officeId: this.form.id
          },
          permission:this.unionButton.children[2].children[2].id,
          success: res => {
            if (res.code == 1) {
              if (this.common.isEmpty(res.data.rows)) {
                this.users = $.extend(true, [], [])
              } else {
                this.users = $.extend(true, [], res.data.rows)
              }
            }
          }
        })
      },
      initCompany() {
        this.common.request({
          url: this.unionButton.target,
          param: {
            parentId: '0',
          },
          permission: this.unionButton.id,
          success: res => {
            if (res.code == 1) {
              if (this.common.isEmpty(res.data.rows)) {
                this.companies = $.extend(true, [], [])
              } else {
                this.companies = $.extend(true, [], res.data.rows)
              }
            }
          }
        })
      },
      choseParent(content) {
        this.parent = $.extend(true, {}, content)
        this.$set(this.form, 'parentCode', content.code)
      },
      choseType(content) {
        this.$set(this.form, "type", content.name)
        this.$set(this.form, "typeId", content.id)
      },
      choseLevel(content) {
        this.$set(this.form, "level", content.name)
        this.$set(this.form, "levelId", content.id)
      },
      choseArea(content) {
        this.$set(this.form, "area", content.name)
        this.$set(this.form, "areaId", content.id)
        this.$set(this.form, "zipCode", content.code)
      }
    },
    data() {
      return {

        userChoseShow: false,
        parent: {
          id: '0',
          name: '',
          code: '',
          companyId:'',
          companyName:'',
        },
        companies: [],
        users: [],
      }
    },
    props: {
      form: {
        type: Object,
        default() {
          return {
            id: '',
            name: '',
            code: '',
            parentCode: '',
            parentName: '',
            parentId: '',
            companyId: '',
            companyName: '',
            companyCode: '',
            areaId: '',
            area: '',
            levelId: '',
            level: '',
            typeId: '',
            type: '',
            chiefId: '',
            chief: '',
            deputyId: '',
            deputy: '',
            zipCode: '',
            phone: '',
            mail: '',
            fax:''
          }
        }
      },
      unionButton: {
        type: Object
      },
      button: {
        type: Object
      }
    }
  }
</script>

<style scoped>

</style>
